<template>
    <div class="my-plan-container">
        <!-- 标题 -->
        <h1>My PlanList</h1>
        <!-- 计划列表 -->
        <div class="plan-list">
            <!-- 遍历计划数据
            <div class="plan-item" v-for="item, index in planData">
                计划名称
                <h4 style="color: orange;">{{ item.planName }}</h4>
                计划详情
                <p>{{ item.planDetail }}</p>
                删除按钮
            </div> -->
            <el-collapse style="width: 100%;" v-model="activeName" accordion>
                <el-collapse-item v-for="item, index in planData" :title="item.planName" :name="index" :key="index">
                   <div> <VueMarkdown>{{ item.planDetail }}</VueMarkdown></div>
                <span class="delbt" @click="delPlan(item.planId)">x</span>

                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
</template>

<script>
// 引入获取计划列表和删除计划的接口
import { getPlan, delPlan } from '../../api/system/ai';
// 引入js-cookie插件
import Cookies from 'js-cookie'
import VueMarkdown from 'vue-markdown'

export default {
    components: {
        VueMarkdown
    },
    data() {
        return {
            // 计划数据
            planData: [],
            activeName:0
        }
    },
    // 组件创建时获取计划列表
    created() {
        this.getPlan()
    },
    methods: {
        // 获取计划列表
        getPlan() {
            // 打印用户id
            // console.log(111,Cookies.get('Id'));

            // 调用获取计划列表的接口
            getPlan(Cookies.get('Id')).then(res => {
                // 将获取到的计划数据赋值给planData
                this.planData = res.data

            })
        },
        // 删除计划
        delPlan(id) {

            // 弹出确认框
            this.$confirm('确定删除该计划吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 调用删除计划的接口
                delPlan(id).then(res => {
                    // 弹出删除成功的提示
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    // 重新获取计划列表
                    this.getPlan()
                })
            }).catch(() => { });
        }

    }
}

</script>

<style lang='scss'>
.my-plan-container {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .plan-list {
        width: 1200px;
        margin: auto 0;
        // height: 600px;
        padding: 100px 0;
        border: 1px solid #ccc;
        display: flex;
        flex-wrap: wrap;
        // align-items: center;
        // justify-content: center;
        padding: 100px 20px ;
        gap: 50px;
        .el-collapse-item {
            position: relative;

            .delbt {
                    position: absolute;
                    top: 20px;
                    right: 50px;
                        // padding: 0 5px;
                    width: 20px;
                    height: 20px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-radius: 50%;
                    background-color: #ccc;
    
                    &:hover {
                        background-color: #827a7a;
                        cursor: pointer;
                    }
                }
        }
        .plan-item {
            width: 30%;
            height: 200px;
            border-bottom: 1px solid #ccc;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: auto;
            padding: 0 20px;
            box-sizing: border-box;
            position: relative;

            

            &:hover {
                background-color: #f5f5f5;
            }
        }
    }
}
</style>